<template>
  <div class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <div class="myIntegral-page">
    		<div class="integral-top">
    				<div class="integral-num">
    					<div>
							<span style="vertical-align: middle;padding-right:5px;">当前积分</span>
						</div>
    					<div class="num-big">{{count}}</div>
    				</div>
    				<div class="integral-btn" @click="toExchangeList" style="display: flex;align-items: center;justify-content: center;">
    					<div style="vertical-align: middle;margin-right:5px">兑换记录</div>
						 <u-icon name="arrow-right" color="#fff" size="10"></u-icon>
    				</div>
    		</div>
    
    		<div class="goods-list">
    			<div class="goods-title">积分明细 <span class="title-label"><span style="color:#FFC096">收入</span>/支出</span></div>
					<div class="goods-list-con">
						<div class="goods-item" v-for="(item,index) in list" :key="index">
							<div class="goods-item-left">
								<div class="goods-name">{{item.remark}}</div>
								<div class="goods-time">{{item.createTime}}</div>
							</div>
							<div class="goods-item-right">{{ item.integralValue }}</div>
						</div>
					</div>
					<div style="padding-bottom:40rpx;" >
						<u-loadmore :status="status"></u-loadmore>
					</div>
    			
    		</div>
    
    	</div>
 </div>
</template>

<script>
  import{integrallOgList,integralUserInfo} from '@/config/points.js'
  import {pageSeo} from '@/config/api.js'
  import store from '@/store';
  export default {
    components: {
      

    },
    data() {
      return {
			showRight:false,
			show:false,
			showTop:false,
			total:0,
			list:[],
			pageNum:1,
			pageSize:10,

			loading: false,
			status: 'loadmore',
			count:0
      }
    },
	async onLoad(options) {
    	await this.$onLaunched;
		this.clearData()
		this.getList()
		this.getCount()
    },
	async onShow() {
		// #ifdef H5
		pageSeo({pageType: 'indexPage'}).then((res)=>{
			document.title = res.pageTitle;
		})
		// #endif	
	},
	filters:{
		fifvalue(val){
			if( parseInt(val) > 0){
				return "+" + val
			}else{
				return val
			}
		},
	},
	onReachBottom() {
		if(this.list.length >= this.count) {
			this.status = 'nomore';
			return ;
		}
		this.pageNum = ++ this.pageNum;
		this.getList()
	},
    methods: {
		toExchangeList(){
			uni.navigateTo({
			    url:'/pagesIntegral/intergralOrderList'
			})
		},
		toGoodsInfo(item){
			uni.navigateTo({
			    url:"/pagesIntegral/integralGoodsInfo?goodsId=" + item.goodsId
			})
		},
		//清除数据
		clearData(){
			this.pageNum = 1;
			this.list = [];
			this.status = 'loadmore';
			this.total = 0
		},

		//获取列表
		getList(){
			this.loading = true;
			let listQuery = {};
			listQuery.pageNum = this.pageNum;
			listQuery.pageSize = this.pageSize;
			integrallOgList(listQuery).then((res)=>{
				this.loading = false;
				this.list = this.list.concat(res.list ? res.list : [] );
				this.total = res.count;
				if(this.list.length >= this.total) {
					this.status = 'nomore';
				}else{
					this.status = 'loadmore';
				}
			}).catch(()=>{
				// 加载状态结束
				this.status = 'loadmore';
			})
		},

		//积分余额
		getCount(){
			integralUserInfo().then((res)=>{
				this.count = res.userInfo.balance;
			})
		},
		
	},
  }
</script>


<style lang="scss">
	.myIntegral-page{
		min-height: 100%;
	 }
	 .myIntegral-page .integral-top{
		 background: url("https://pic.moresu.com/FmPhKdk3s9w15hGHa4Pa8bmD5nZj") no-repeat;
		 background-size: 100%;
		 height:300px;
		 padding: 18px 20px 50px 20px;
		 background-position: 0 -90px;
	 }
	 .myIntegral-page .integral-top .integral-num{
		   font-size: 14px;
		   line-height: 24px;
		   color: #FFFFFF;
	 }
	 .myIntegral-page .integral-top .integral-num .num-big{
		  font-size: 24px;
		  font-weight: bold;
		  line-height: 36px;
		  color: #fff;
		  margin-top:5px;
	 }
	 .myIntegral-page .integral-top .integral-btn{
		width: 96px;
		height: 26px;
		background: rgba(255,255,255,0.2);
		border-radius: 13px;
		font-size: 12px;
		color: #FFFFFF;
		text-align:center;
		line-height:22px;
		margin-top:10px;
		cursor: pointer
	 }
	 .myIntegral-page .goods-list{
	   background:#fff;
	   border-top-left-radius: 20px;
	   border-top-right-radius: 20px;
	   margin-top: -160px;
	   padding:30px 20px
	 }
	 .myIntegral-page .goods-list .goods-title{
		font-size: 18px;
		line-height: 24px;
		color: #33456B;
		border-bottom:1px solid #F4F4F4;
		padding-bottom:15px
	 }
	 .myIntegral-page .goods-list .goods-title  .title-label{
		font-size: 12px;
		line-height: 16px;
		color: #9DAABD;
		float:right;
		margin-top:5px
	 }
	 .myIntegral-page .goods-list .goods-list-con .goods-item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		 padding:16px 0;
		 border-bottom:1px solid #F4F4F4
	 }
	 .myIntegral-page .goods-list .goods-list-con .goods-item .goods-item-left{
		flex:1;
		padding-right:40px
	 }
	.myIntegral-page .goods-list .goods-list-con .goods-item .goods-item-left .goods-name{
		 color:#000;
		 font-size:14px;
		 line-height: 20px;
		 word-break:break-all;
	 }
	.myIntegral-page .goods-list .goods-list-con .goods-item .goods-item-left .goods-time{
		font-size: 12px;
		color: #9DAABD;
	}
	 .myIntegral-page .goods-list .goods-list-con .goods-item .goods-item-right{
		 white-space:nowrap;
		 font-size: 20px;
		 font-weight: bold;
		 line-height: 24px;
		 color: #33456B;
	 }
</style>


    
    
